<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>事件修饰符</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
		<style>
			* {
				/* 通配符，所有元素直接都有一个10px间距*/
				margin-top: 20px;
			}

			.demo1 {
				height: 50px;
				background-color: blue;
			}

			.box1 {
				padding: 5px;
				background-color: red;
			}

			.box2 {
				padding: 5px;
				background-color: green;
			}
		</style>
	</head>
	<!-- 
		Vue中的事件修饰符:
		1.prevent:阻止默认事件(常用):
		2.stop:阻止事件冒泡(常用):
		3.once:事件只触发一次(常用);
		//js里面的事件流分为捕获阶段和冒泡阶段;
		//捕获阶段是从外往内的（类似android从父级传递给子级）；
		//冒泡是由内外（由子级反馈给父级）
		4.capture:使用事件的捕获模式;
		5.self:只有event.target是当前操作的元素时才触发事件;
		6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕:
	 -->
	<body>
		<!--准备好一个容器-->
		<div id="root">
			<h1>你好，{{name}}</h1>
			<!-- 
			 1.prevent:阻止默认事件(常用): 
			 点击‘点我提示信息’默认跳到目标链接。
			 添加prevent修饰符，点击不再跳转。这就是阻止默认事件。
			-->
			<a href="https:\\www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>
			<!-- 2. stop:阻止事件冒泡(常用): 类似安卓的事件传递-->
			<!-- div中有嵌套一个button,都有一个showInfo事件
				 当点击button的showInfo事件，也会触发div中的showInfo事件。这就是事件冒泡。
			 -->
			<div class="demo1" @click="showInfo('1',$event)">
				<!-- 注意，是给button加stop修饰符，而不是给外部的div加-->
				<button @click="showInfo('2',$event)">stop:阻止事件冒泡(常用):</button>
				<!--修饰符可以连续写,先阻止默认事件，再阻止冒泡-->
				<a href="http://www.atguigu.com" @click.prevent.stop="showInfo">阻止事件冒泡(常用)</a>
			</div>
			<!-- 3. once:事件只触发一次(常用); -->
			<button @click.once="showInfo('2',$event)">事件只触发一次</button>

			<!-- 4.capture:使用事件的捕获模式; 
			     如果不在外层添加capture修饰符，点击内层的事件，打印的是2,1
				 如果在外层添加capture修饰符，点击内层的事件，打印的是1,2
				 添加capture后，意思就是先捕获在冒泡。
			-->
			<div class="box1" @click.capture="showMsg('1')">
				div1
				<div class="box2" @click="showMsg('2')">
					div2
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
		new Vue({
			el: '#root',
			data: {
				name: '尚硅谷'
			},
			methods: {
				showInfo(a, e) {
					//event.preventDefault() //使用event的preventDefault也能阻止默认事件。
					//e.stopPropagation()////使用event的stopPropagation也阻止事件冒泡。
					alert("你好同学" + a)
				},
				showMsg(msg) {
					console.log(msg)
				},

			}
		})
	</script>
</html>